<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始化项目</title>
    <script src="./jquery-1.11.3.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            margin: 20px;
            width: 800px;
        }

        .row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .input-group {
            flex: 1;
            display: flex;
            align-items: center;
            margin-right: 10px;
        }

        .ip-input {
            flex: 1;
            margin-right: 10px;
            height: 30px;
        }

        .select-option {
            margin-right: 10px;
            width: 200px;
            height: 30px;
        }

        .button-group {
            display: flex;
        }

        .add-button,
        .send-button {
            margin-right: 10px;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="row" id="row-container">
        <!-- 初始的一行 -->
        <div class="input-group">
            <span>请输入目标ip：</span>
            <input type="text" class="ip-input" placeholder="输入IP">
            <select class="select-option">
                <option value="SJ">苏教版</option>
                <option value="JK">教科版</option>
                <option value="JPCB">初中理化生</option>
                <option value="JP">初中物理</option>
                <option value="JC">初中化学</option>
                <option value="JB">初中生物</option>
                <option value="HPCB">高中理化生</option>
                <option value="HP">高中物理</option>
                <option value="HC">高中化学</option>
                <option value="HB">高中生物</option>
            </select>
        </div>
        <div class="button-group">
            <!-- 这里没有实际的发送功能，只是示例 -->
            <button class="add-button" onclick="addRow()">添加一行</button>
            <button class="send-button" onclick="send(this)">开始安装</button>
        </div>
    </div>
</div>

<script>
    function addRow() {
        const rowContainer = document.getElementById('row-container');
        const newRow = rowContainer.cloneNode(true); // 克隆初始行（包括事件监听器）
        // 清除可能的ID或重复属性
        newRow.removeAttribute('id');
        // 重置或清除新的输入和选择框（可选）
        newRow.querySelector('.ip-input').value = '';
        newRow.querySelector('.select-option').value = 'a'; // 或者使用selectedIndex
        // 禁用新行的添加按钮（可选）
        newRow.querySelector('.add-button').disabled = true;
        // 插入新行到容器最后
        rowContainer.parentNode.insertBefore(newRow, rowContainer.nextSibling);
    }

    function send(btn) {
        //先找到ip
        var input = $(btn).parents(".row").find(".ip-input")
        var select = $(btn).parents(".row").find(".select-option");
        var IP = input.val();
        var type = select.val();
        if (IP) {
            if (type) {
                console.log(IP, type);
                $.ajax({
                    url: `http://${window.location.hostname}:8088/base/init?IP=${IP}&type=${type}`,  // 请求的URL
                    type: 'get',                         // 请求方法
                    dataType: 'json',   // 预期服务器返回的数据类型
                    // contentType: "application/json",
                    success: function (data, status, xhr) {
                        // 这是一个回调函数，当请求成功时会被调用
                        console.log(data);
                    }
                });
            } else {
                alert("安装类型不能为空")
            }

        } else {
            alert("IP不能为空")
        }
    }
</script>
</body>

</html>